import React, { Component } from 'react'
import { NavBar, SearchBar } from 'antd-mobile';
import GoBack from '../../components/GoBack';
import './Cate.less'
// 改为容器型组件
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { actions, getCard, getGoods, getN } from '../../store/modules/cate';
import CateShow from './CateShow/CateShow';

class Cate extends Component {
    componentDidMount() {
        // 1.取出方法
        let { cate: { reqCardAction, reqGoodsAction } } = this.props
        // 2.调用方法
        reqCardAction()
        // 调用
        reqGoodsAction(0, 1)

    }


    render() {
        // 3.取出初始
        let { card, n, cate: { reqGoodsAction }, goods } = this.props
        return (
            <div className="cate">
                <NavBar
                    mode="dark"
                    icon={<GoBack></GoBack>}
                >分类</NavBar>
                <div className="nav_search">
                    <SearchBar placeholder="搜索" maxLength={8} />
                </div>

                {/* 6. 传给子组件 */}
                <CateShow {...this.props} goodslist={goods} leftlist={card} reqGoods={(index, id) => reqGoodsAction(index, id)} n={n}></CateShow>
            </div>
        )
    }
}
const mapStateToProps = (state) => {
    return {
        //4.取出card的数据
        card: getCard(state),
        goods: getGoods(state),
        n: getN(state)
    }
}

const mapDispatchToProps = (dispatch) => {  
    return {
        // 5.将cate的actions和dispatch用bindActionCreators结合起来
        cate: bindActionCreators(actions, dispatch)
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Cate)
